Skip to content

feat(ui): add mosaic block/section/aio prototype layers#8838

Open
alexcarpenter wants to merge 3 commits into
carp/mosaic-recipesfrom
carp/mosaic-block-destructive
Open

feat(ui): add mosaic block/section/aio prototype layers#8838
alexcarpenter wants to merge 3 commits into
carp/mosaic-recipesfrom
carp/mosaic-block-destructive

Conversation

@alexcarpenter

@alexcarpenter alexcarpenter commented Jun 11, 2026 •
edited by kylemac
Loading

Copy link
Copy Markdown
Member

Summary

  • Adds three new component hierarchy layers under packages/ui/src/mosaic/:
    • block/destructive.tsx — controlled confirmation dialog composed from Dialog + Input + Button; caller owns open/deleting state; input must match resource name to enable the action
    • section/leave-organization.tsx — owns open / isDeleting state, wires Destructive to the leave-organization flow
    • aio/organization-profile.tsx — assembles organization sections into a full-page view
  • Adds swingset stories for all three under new AIO, Sections, and Blocks sidebar groups
  • Fixes slug.ts to treat consecutive uppercase letters as acronyms (AIO → aio not a-i-o)

https://swingset-git-carp-mosaic-block-destructive.clerkstage.dev/sections/delete-organization

Test plan

  • Visit localhost:6006/aio/organization-profile — page renders with a "Leave organization" heading and trigger button
  • Visit localhost:6006/sections/leave-organization — same section in isolation
  • Visit localhost:6006/blocks/destructive — bare block with controlled state in the story
  • Open the dialog, verify submit button is disabled until the resource name is typed exactly
  • Confirm input resets after closing the dialog without confirming
  • turbo build --filter=@clerk/ui passes with no type errors

@alexcarpenter
feat(ui): add mosaic block, section, and aio prototype layers
f64269d 
Introduces three new component hierarchy layers under packages/ui/src/mosaic/:

- block/destructive.tsx — controlled confirmation dialog (trigger + input guard + action)
- section/leave-organization.tsx — owns open/deleting state, wires Destructive to leave flow
- aio/organization-profile.tsx — assembles organization sections into a full-page view

Also adds swingset stories for all three (Blocks / Sections / AIO sidebar groups) and fixes
slug.ts to treat consecutive uppercase letters as acronyms (AIO → aio, not a-i-o).
@vercel

vercel Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Jun 12, 2026 12:47am
swingset Ready Ready Preview, Comment Jun 12, 2026 12:47am

Request Review

@changeset-bot

changeset-bot Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: df54c31

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions Bot added the ui label Jun 11, 2026
@coderabbitai

coderabbitai Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: fc5f33e1-ca0b-4b70-b09e-f1f00a4d3aaf

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@alexcarpenter alexcarpenter changed the base branch from main to carp/mosaic-recipes June 11, 2026 21:28
@vercel vercel Bot temporarily deployed to Preview – clerk-js-sandbox June 11, 2026 21:31 Inactive
@github-actions

github-actions Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-11T21:32:59.799Z

Summary

Metric Count
Packages analyzed 19
Packages with changes 1
🔴 Breaking changes 0
🟡 Non-breaking changes 1
🟢 Additions 0

🤖 This report was reviewed by claude-sonnet-4-6.

Note
Break Check could not snapshot 3 subpaths; the diff below excludes them.

  • @clerk/astro ./env: Internal Error: Unable to determine module for: /home/runner/_work/javascript/javascript/packages/astro/env.d.ts You have encountered a software defect. Please consider reporting the issue to the maintainers of this application.
  • @clerk/shared ./cookie: Internal Error: Unable to follow symbol for "Cookies" You have encountered a software defect. Please consider reporting the issue to the maintainers of this application.
  • @clerk/testing ./cypress: Symbol not found for identifier: Cypress

@clerk/shared

Current version: 4.17.1
Recommended bump: MINOR → 4.18.0

Subpath ./types

🟡 Non-breaking Changes (1)

Modified: __internal_LocalizationResource
// ... 939 unchanged lines elided ...
        members: LocalizationValue;
        billing: LocalizationValue;
        apiKeys: LocalizationValue;
-       security: LocalizationValue;
+       selfServeSSO: LocalizationValue;
      };
      badge__unverified: LocalizationValue;
      badge__automaticInvitation: LocalizationValue;
// ... 978 unchanged lines elided ...

Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…

🤖 AI review (reclassified as non-breaking) (55%): The before and after snippets are textually identical in all visible portions (including the elided 1844 lines count), and __internal_LocalizationResource is used only as the source for DeepPartial<DeepLocalizationWithoutObjects<...>> (an output/read type), so no consumer-constructed value is directly typed against it; without a concrete diff between the two shapes, there is no identifiable breaking change.

Report generated by Break Check

Last ran on f64269d.

@kylemac @alexcarpenter
feat(ui): add Mosaic Delete Org section and destructive button variant (
df54c31 
#8839)

Co-authored-by: Alex Carpenter <alex.carpenter@clerk.dev>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter @kylemac